import React, { useState } from 'react';
import { Button, Form, Input, Modal, Select, notification } from 'antd';
import { stu_setdata } from '../utils/api3'
import axios from 'axios'
function Modals(props) {
    const [visiable, setVisiable] = useState(false);
    const [form] = Form.useForm();

    // 打开弹窗
    const open = () => {
        setVisiable(true);
    };
    //关闭弹窗
    const close = () => {
        setVisiable(false);
    };
    //点击确定提交表单
    const submit = () => {
        form.submit()
    }
    // 提交后获取表单数据，请求接口，重置表单并关闭
    const onSubmit = (values) => {
        // console.log( values)
        console.log('666', props.total);
        var value = { ...values, key: props.total + 1 }
        stu_setdata(value ).then((res) => {
            console.log(res.data);
            notification.success({
                message: "更新成功",
                placement: 'top'
            })
        })
        // axios.post('/studentlist', { ...values, key:props.total+1}).then((res) => {
        //     console.log(res.data);
        //     notification.success({
        //         message: "更新成功",
        //         placement: 'top'
        //     })
        // })
        form.resetFields();
        close()
    }
    return (
        <div className='modal'>
            <div className="text-center">
                <Button type="primary" size='small' onClick={open}>
                    添加
                </Button>
            </div>
            <Modal
                wrapClassName="modal-wrap"
                okText="提交"
                cancelText="取消"
                cancelButtonProps={{ shape: 'round' }}
                okButtonProps={{ shape: 'round' }}
                width={600}
                visible={visiable}
                title="新建学生信息"
                onCancel={close}
                onOk={submit}
            >
                <div className="form">
                    <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} onFinish={onSubmit}>
                        <Form.Item
                            label="学号"
                            name="userid"
                            rules={[{ required: true, message: '请输入学号!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="姓名"
                            name="name"
                            rules={[{ required: true, message: '请输入姓名!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="电话"
                            name="phone"
                            rules={[{ required: true, message: '请输入电话!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="邮箱"
                            name="email"
                            rules={[{ required: true, message: '请输入邮箱!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="性别"
                            name="sex"
                            rules={[{ required: true, message: '请选择您的性别!' }]}
                        >
                            <Select>
                                <Select.Option value={"女"}>女</Select.Option>
                                <Select.Option value={"男"}>男</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="生日"
                            name="birthday"
                            rules={[{ required: true, message: '请输入生日!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="账号状态"
                            name="userstate"
                            rules={[{ required: true, message: '请选择您的账号状态!' }]}
                        >
                            <Select>
                                <Select.Option value={"0"}>禁用</Select.Option>
                                <Select.Option value={"1"}>启用</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="健康状态"
                            name="healthstate"
                            rules={[{ required: true, message: '请选择您的健康状态!' }]}
                        >
                            <Select>
                                <Select.Option value={"0"}>确诊</Select.Option>
                                <Select.Option value={"1"}>健康</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="宿舍"
                            name="address"
                            rules={[{ required: true, message: '请输入宿舍号!' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="部门"
                            name="college"
                            rules={[{ required: true, message: '请选择您的学院!' }]}
                        >
                            <Select>
                                <Select.Option value={"信工学院"}>信工学院</Select.Option>
                                <Select.Option value={"商学院"}>商学院</Select.Option>
                                <Select.Option value={"文学院"}>文学院</Select.Option>
                                <Select.Option value={"师范学院"}>师范学院</Select.Option>
                                <Select.Option value={"辣条学院"}>辣条学院</Select.Option>
                            </Select>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        </div>
    );
}

export default Modals;